<script setup>
import {Plus} from "@element-plus/icons-vue";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import request9999 from "../../utils/request9999.js";
// 获取用户类型
const type = ref('')
// 用户信息
const avatar=ref(sessionStorage.getItem('avatar'))
const LoginInfo = ref({
  name: '',
  phone: '',
})
// 获取用户信息
const getInfo = () => {
  if (sessionStorage.getItem('type') !== null) {
    type.value = sessionStorage.getItem('type')
  }
  if (sessionStorage.getItem('name') !==null) {
    LoginInfo.value.name = sessionStorage.getItem('name')
  }
  if (sessionStorage.getItem('phone') !==null) {
    LoginInfo.value.phone = sessionStorage.getItem('phone')
  }
}
getInfo()
// 头像上传成功
const handleAvatarSuccess = (res => {
  avatar.value = res.data
})
//修改头像
const uploadAvatar = () => {
  request9999({
    url: '/loginTable/modAvatar',
    method: 'put',
    params: {
      avatar: avatar.value,
      id: sessionStorage.getItem('id')
    }
  }).then((res) => {
    if (res.data.code === 200) {
      sessionStorage.setItem('avatar', avatar.value)
      getInfo()
      ElMessage.success(res.data.message)
    }
  }).catch((err) => {
    ElMessage.error("操作异常")
  })
}
</script>

<template>
  <div class="myLoginInfoAll">
    <el-card style="width: 800px;">
      <el-form inline="inline" :model="LoginInfo" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="LoginInfo.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="LoginInfo.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="头像" class="el-input">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:9999/loginTable/upload"
              :auto-upload="true"
              name="file"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img :src="avatar" v-if="avatar" class="avatar" alt="1"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="我的身份">
          <el-tag v-if="type===''" type="danger">未发现身份信息</el-tag>
          <el-tag v-if="type==='0'" type="success">学生</el-tag>
          <el-tag v-if="type==='1'" type="success">食堂管理员</el-tag>
          <el-tag v-if="type==='2'" type="success">课堂管理员</el-tag>
          <el-tag v-if="type==='3'" type="success">迎新管理员</el-tag>
          <el-tag v-if="type==='4'" type="success">娱乐管理员</el-tag>
          <el-tag v-if="type==='5'" type="success">老师</el-tag>
          <el-tag v-if="type==='6'" type="success">商家</el-tag>
          <el-tag v-if="type==='7'" type="success">团长</el-tag>
        </el-form-item>
      </el-form>
      <el-button type="success" style="margin-left: 25px;"
      @click="uploadAvatar">修改头像</el-button>
    </el-card>
  </div>
</template>

<style scoped>
.avatar-uploader-icon {
  margin: 40px;
}
.avatar{
   width: 100px;
  height: 100px;
}
.avatar-uploader {
  border: grey solid 2px;
  width: 100px;
  height: 100px;
}

.myLoginInfoAll {
  padding: 40px;
}
</style>
